<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">切换登陆账号</view>
		</view>
		<view class="cu-card">
			<view class="cu-item padding-sm">
				<view class="flex justify-between">
					<view>
						<view>当前账号角色：{{loginRoleTypeName}}</view>
						<view v-if="loginSuperior" class="text-grey">联系人：{{loginSuperior}}</view>
						<view v-if="loginUserName" class="text-grey">昵称：{{loginUserName}}</view>
					</view>
					<view><button class="cu-btn sm" @click="btnLogout()">退出账号</button></view>
				</view>
			</view>
		</view>
		<view class="list-body">
			<scroll-view scroll-y @scrolltolower="scrollTolower">
				<view class="cu-card" v-for="(item,index) in listData" :key="index" v-if="item.state == 0">
					<view class="cu-item padding-sm">
						<view class="flex justify-between">
							<view>
								<view class="text-orange text-bold">账号角色：{{item.roleTypeName}}</view>
								<view v-if="item.superior">联系人：{{item.superior}}</view>
								<view v-if="item.userName">昵称：{{item.userName}}</view>
							</view>
							<view><button class="cu-btn sm bg-orange" @click="btnAccountChange(item)">切换</button></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginUserName:null,
				loginRoleTypeName:'角色名称',
				loginRoleType:1,
				loginSuperior:null,
				
				listData:[]
			}
		},
		onLoad(option) {
			this._loadListData();
		},
		methods: {
			_loadListData:function(){
				uni.showLoading({
					title:'加载中...'
				})
				const _self = this;
				const api = this.$request;
				let roleType = null;
				if(this.tabIndex > 0){
					roleType = this.tabIndex + 1;
				}
				api.post(api.url.accountList,{},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self.listData = res.body.items;
						for(let item of res.body.items){
							if(item.state == 1){
								_self.loginUserName = item.userName;
								_self.loginRoleType = item.roleType;
								_self.loginRoleTypeName = item.roleTypeName;
								_self.loginSuperior = item.superior;
								break;
							}
						}
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							complete:function(){
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}
				})
			},
			_changeAccount:function(item){
				uni.showLoading({
					title:'切换中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.accountChange,{
					userId:item.superiorId,
					roleType:item.roleType
				},(res)=>{
					console.log(res)
					if(res.code==200){
						_self.$store.commit('SET_userInfo',res.body);
						setTimeout(function(){
							uni.hideLoading();
							_self.$common.toIndex();
						},1000)
					}else if(res.msg){
						uni.hideLoading();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			btnLogout:function(){
				const _self = this;
				uni.showModal({
					title:'温馨提示',
					content:'确定要退出账号吗？',
					complete:function(res){
						if(res.confirm){
							_self.$store.commit('SET_userInfo',null);
							_self.$store.commit('SET_autoLogin',false);
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}
					}
				})
			},
			btnAccountChange:function(item){
				let content = '确定要切换' + item.roleTypeName;
				if(item.superior){
					content = content + '('+item.superior+')账号吗？';
				}else{
					content = content + '账号吗？';
				}
				const _self = this;
				uni.showModal({
					title:'温馨提示',
					content:content,
					complete:function(res){
						if(res.confirm){
							_self._changeAccount(item);
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
.list-body .cu-card>.cu-item{margin-top:10rpx;margin-bottom:5rpx;}
</style>
